<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :router="true"
  >
    <el-menu-item index="/user/publish">帖子发布</el-menu-item>
    <el-menu-item index="/user/info">用户信息</el-menu-item>
    <el-menu-item index="/user/appointments">预约查询</el-menu-item>
    <el-menu-item index="/user/consultation">在线咨询</el-menu-item>
  </el-menu>

  <div class="content">
    <router-view/>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const activeIndex = ref('/user/info');

// 监听路由变化，更新激活的菜单项
onMounted(() => {
  activeIndex.value = route.path;
});
</script>

<style lang="scss" scoped>
.el-menu-demo {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  background: #fff;

  :deep(.el-menu-item) {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    transition: all 0.3s;

    &:hover {
      background-color: #f5f7fa;
    }

    &.is-active {
      color: #409EFF;
      border-bottom: 2px solid #409EFF;
    }
  }
}

.content {
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  min-height: 500px;
}
</style>
